---
title: Calendar Blocks
description: Date selection and scheduling blocks with pixel-perfect styling.
---

## Calendar Blocks

Date selection and scheduling blocks with pixel-perfect styling. Perfect for date pickers, booking systems, and scheduling interfaces.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
  <a href="/docs/blocks/calendar/calendar-block" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Simple Calendar</h4>
    <p className="text-sm text-muted-foreground">Basic date selection calendar</p>
  </a>
  <a href="/docs/blocks/calendar/calendar-range" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Range Calendar</h4>
    <p className="text-sm text-muted-foreground">Date range selection with two months</p>
  </a>
  <a href="/docs/blocks/calendar/calendar-single" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Single Date Calendar</h4>
    <p className="text-sm text-muted-foreground">Single date with dropdown navigation</p>
  </a>
</div>
